<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>个人中心-相册内页</title>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="../scss/bootstrap/javascripts/bootstrap.min.js"></script>
    <script src="../scss/bootstrap/javascripts/offcanvas.js"></script>
</head>
<body>
<div class="personal">
    <section class="p_header hidden-xs">
        <div class="tree_header">
            <div class="max_body">
                <div class="pull-left ">
                    <ul class="list-inline">
                        <li><a href="#">首页</a></li>
                        <li><a href="#">新闻</a></li>
                        <li><a href="#">家庭树</a></li>
                        <li><a href="#">族谱</a></li>
                        <li><a href="#">广场</a></li>
                        <li><a href="#">百家姓</a></li>
                    </ul>
                </div>
                <div class="pull-right hidden-sm hidden-xs">
                    <div class="user_box">
                        <div class="user">
                            <i class="fa fa-user m-r-xs"></i>杨薇
                        </div>
                        <ul class="drop_info">
                            <li><a href="#" class="active">个人设置</a></li>
                            <li><a href="#">消息通知</a></li>
                            <li><a href="#">退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="visible-xs">
        <div class="p_xs_menu">
            <nav class="navbar  navbar-inverse text-right ht_nav" role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                                data-target="#example-navbar-collapse">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="collapse navbar-collapse" id="example-navbar-collapse">
                        <ul class="list-inline">
                            <li><a href="#">首页</a></li>
                            <li><a href="#">新闻</a></li>
                            <li><a href="#">家庭树</a></li>
                            <li><a href="#">族谱</a></li>
                            <li><a href="#">广场</a></li>
                            <li><a href="#">百家姓</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
            <a class="navbar-brand col-xs-5 visible-xs" href="#"> <img src="../images/logo2.png" alt="族谱网www.zupu.cn" height="32px" class="m-r-xs pull-left"></a>
        </div>
    </section>
    <section class="p_info max_body">
        <div class="row">
            <div class="col-sm-8 col-xs-12">
                <div class="media p15">
                    <a class="media-left col-xs-4 row" href="#">
                        <img src="../images/demo01.jpg." alt="头像" class="img-rounded img-responsive">
                    </a>
                    <div class="media-body p-l-md">
                        <h4 class="media-heading text_black"> <span class="text-info fwb">♂</span> 杨薇的主页</h4>
                        <p class="m-t text_oneline">中华人民共和国解放军少将，央视军事频道评论员</p>
                        <p class="m-t-xs hidden-xs">http://www.zupu.cn/u/100020 <button class="btn btn_xs">复制</button></p>
                        <p class="m-t-xs">
                            亲情指数：<i class="fa fa-star text_theme"></i><i class="fa fa-star text_theme"></i><i class="fa fa-star text_theme"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 hidden-xs text-center qr_hot">
                <img src="../images/ewm.png" alt="" class="img-thumbnail">
                <p class="text-center f18">热度<span class="text_theme">23243</span></p>
            </div>
        </div>
    </section>
    <section class="p_nav max_body">
        <ul class="list-inline">
            <li class="hidden-xs"><a>&emsp;</a></li>
            <li><a href="#">主页</a></li>
            <li><a href="#">记录<span class="hidden-xs">（234）</span></a></li>
            <li><a href="#" class="active">相册</a></li>
            <li><a href="#">家庭树</a></li>
            <li><a href="#">个人档案</a></li>
        </ul>
    </section>
    <section class="p_main max_body">
        <div class="bbs p-tb row pt_rl">
            <div class="col-sm-7 col-xs-12">
                <div class="media">
                    <div class="media-left">
                        <img src="../images/demo03.jpg" alt="" class="img-thumbnail" height="80px" width="80px">
                    </div>
                    <div class="media-right">
                        <div class="m-t-xs text_oneline">
                            <span class="f22">默认相册</span>
                              <span class="hidden-xs">  120张 <span class="text_gray">/所有人可见</span></span>
                                <a href="#" class="m-l text-info">编辑</a>
                        </div>
                        <div class="m-t">
                            <button class="btn btn_theme m-r lh-nm"   data-toggle="modal" data-target="#myAlbum">上传照片</button>
                            <button class="btn btn-default">创建相册</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-5 col-xs-12 text-right  xc_opt hidden-xs">
                <input type="checkbox"> 本页全选
                <button class="btn btn-default m-r lh-nm">删除</button>
                <button class="btn btn-default" >批量管理</button>
            </div>
            <div class="col-xs-12 visible-xs m-t">
                <div class="pull-left p-t-xs">
                    <input type="checkbox"> 本页全选
                </div>
                <div class="pull-right">
                    <button class="btn btn-default m-r lh-nm">删除</button>
                    <button class="btn btn-default" >批量管理</button>
                </div>
            </div>
        </div>
        <div class="m-t">
            <ul class="album_xq_list  clearfix">
                <li class="col-xs-6 col-sm-3 col-md-2">
                    <div class="w checked">
                        <div class="img border-s">
                            <img src="../images/0.jpeg" alt="" class="img-responsive">
                            <span class="check"></span>
                        </div>
                        <div class="name text-center text_oneline p-tb-xs border-s">
                            IMG_189.JPG
                        </div>
                    </div>
                </li>
                <li class="col-xs-6 col-sm-3 col-md-2">
                    <div class="w">
                        <div class="img border-s">
                            <img src="../images/0.jpeg" alt="" class="img-responsive">
                            <span class="check"></span>
                        </div>
                        <div class="name text-center text_oneline p-tb-xs border-s">
                            IMG_189.JPG
                        </div>
                    </div>
                </li>
                <li class="col-xs-6 col-sm-3 col-md-2">
                    <div class="w">
                        <div class="img border-s">
                            <img src="../images/0.jpeg" alt="" class="img-responsive">
                            <span class="check"></span>
                        </div>
                        <div class="name text-center text_oneline p-tb-xs border-s">
                            IMG_189.JPG
                        </div>
                    </div>
                </li>
                <li class="col-xs-6 col-sm-3 col-md-2">
                    <div class="w">
                        <div class="img border-s">
                            <img src="../images/0.jpeg" alt="" class="img-responsive">
                            <span class="check"></span>
                        </div>
                        <div class="name text-center text_oneline p-tb-xs border-s">
                            IMG_189.JPG
                        </div>
                    </div>
                </li>
                <li class="col-xs-6 col-sm-3 col-md-2">
                    <div class="w">
                        <div class="img border-s">
                            <img src="../images/0.jpeg" alt="" class="img-responsive">
                            <span class="check"></span>
                        </div>
                        <div class="name text-center text_oneline p-tb-xs border-s">
                            IMG_189.JPG
                        </div>
                    </div>
                </li>
                <li class="col-xs-6 col-sm-3 col-md-2">
                    <div class="w">
                        <div class="img border-s">
                            <img src="../images/0.jpeg" alt="" class="img-responsive">
                            <span class="check"></span>
                        </div>
                        <div class="name text-center text_oneline p-tb-xs border-s">
                            IMG_189.JPG
                        </div>
                    </div>
                </li>
                <li class="col-xs-6 col-sm-3 col-md-2">
                    <div class="w">
                        <div class="img border-s">
                            <img src="../images/0.jpeg" alt="" class="img-responsive">
                            <span class="check"></span>
                        </div>
                        <div class="name text-center text_oneline p-tb-xs border-s">
                            IMG_189.JPG
                        </div>
                    </div>
                </li>
                <li class="col-xs-6 col-sm-3 col-md-2">
                    <div class="w">
                        <div class="img border-s">
                            <img src="../images/0.jpeg" alt="" class="img-responsive">
                            <span class="check"></span>
                        </div>
                        <div class="name text-center text_oneline p-tb-xs border-s">
                            IMG_189.JPG
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </section>
    <footer class="p_footer max_body text-center">
        <ul class="list-inline auto_center">
            <li><a href="#">关于族谱</a></li>|
            <li><a href="#">联系我们</a></li>
            <li><a href="#">版权所有@族谱网 备案：湘ICP备 1600426号</a></li>
        </ul>
    </footer>
    <div class="modal fade" id="myAlbum" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog  modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title fwb" id="myModalLabel">上传照片</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="" class="col-xs-4 col-sm-3 control-label  text-right">上传到：</label>
                            <div class="col-xs-8 col-sm-8">
                                <select name="" id="" class="form-control" style="max-width: 240px">
                                    <option value="1">我的家庭相册</option>
                                    <option value="2">仅自己可见</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <ul class="upload_list col-sm-offset-3 p-l-md clearfix">
                                <li>
                                    <img src="../images/0.jpeg" alt="" class="img-responsive">
                                    <a><i class="fa fa-remove"></i></a>
                                </li>
                                <li>
                                    <img src="../images/0.jpeg" alt="" class="img-responsive">
                                    <a><i class="fa fa-remove"></i></a>
                                </li>
                                <li>
                                    <img src="../images/0.jpeg" alt="" class="img-responsive">
                                    <a><i class="fa fa-remove"></i></a>
                                </li>
                                <li>
                                    <img src="../images/0.jpeg" alt="" class="img-responsive">
                                    <a><i class="fa fa-remove"></i></a>
                                </li>
                                <li>
                                    <img src="../images/0.jpeg" alt="" class="img-responsive">
                                    <a><i class="fa fa-remove"></i></a>
                                </li>
                                <li class="add">
                                    <i class="fa fa-plus f22"></i> <br>
                                    继续添加
                                </li>
                            </ul>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-offset-3 col-sm-offset-3 col-sm-10">
                                <button type="button" class="btn btn_theme btn-lg lh-nm"><i class="fa fa-upload"></i> 开始上传</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>